<template>
	<div class="detailHeader">
		<el-collapse v-model="activeNames">
			<el-collapse-item title="船货信息" name="1">
        <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
            <el-col :span="8">
							<el-form-item label="船名航次" prop="shipvoyageName" class="top">
								<el-input
									v-model="formData.shipvoyageName"
									size="mini"
									placeholder="请输入船名"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="船代" prop="customerName" class="top">
								<el-input
									v-model="formData.customerName"
									size="mini"
									placeholder="请输入船代"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="货种" prop="cargoCategoryName" class="top">
								<el-input
									v-model="formData.cargoCategoryName"
									size="mini"
									placeholder="请输入货种"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="计划件数" prop="planQuantity" class="top">
								<el-input
									v-model="formData.planQuantity"
									size="mini"
									placeholder="请输入计划件数"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="计划重量" prop="planTon" class="top">
								<el-input
									v-model="formData.planTon"
									size="mini"
									placeholder="请输入计划重量"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="计划体积" prop="planVolume" class="top">
								<el-input
									v-model="formData.planVolume"
									size="mini"
									placeholder="请输入计划体积"
									disabled
								/>
							</el-form-item>
						</el-col>
						
			<el-col :span="24">
				<el-form-item label="" prop="shipperName" class="top" style="margin-top:20px;">
					<el-tabs v-model="tabActiveName"  type="border-card" style="box-shadow:none;border:none">
						<el-tab-pane label="作业票明细" name="first">
							<BaseTable
								:data="formData.yardTicketList"
								:columns="tableColumn"
								:tableHeight="tableHeight"
								:pagination="false"
							></BaseTable>
						</el-tab-pane>
						<el-tab-pane label="作业票合计" name="second">
							<el-table
								ref="myTable"
								:data="formData.yardTicketListSum"
								style="width: 100%;margin-bottom: 20px;"
								row-key="checkId"
								border
								:height="tableHeight"
								@selection-change="handleSelectionChange"
								>
								
								<el-table-column
										type="selection"
										:selectable="checkSelect"
										reserve-selection
										width="40">
								</el-table-column>
								<el-table-column width="40">
									
								</el-table-column>
								<el-table-column v-for="item in tableAllColumn" :key="item.id"
									:prop="item.prop"
									:label="item.label"
									:width="item.width"
									:fixed="item.fixed">
									<template slot-scope="scope">
										<div v-if="!item.isShort">
											{{ scope.row[item.prop]}}
										</div>
										<div v-else-if="item.isShort">
											{{ scope.row[item.prop] | customerShortName }}
										</div>
									</template>
								</el-table-column>
								
							</el-table>
						</el-tab-pane>
					</el-tabs>
				</el-form-item>
			</el-col>
			</el-row>
			</el-form>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
export default {
  name: 'settlement',
  components: { BaseTable },
  props: {
    // 表单验证规则
    rules: {
      type: Object
    },
    customerData: {
      type: Array
    }
  },
  data() {
    return {
      activeNames: ['1', '2'], // 折叠面板
      tabActiveName: 'first', // tabs切换
      formData: {
        shipvoyageName: '',
        customerName: '',
        cargoCategoryName: '',
        planCarNum: '',
        planTon: '',
        planVolume: '',
        yardTicketList: [], // 作业票明细
        yardTicketListSum: [] // 作业票合计
      }, // from
      tableColumn: [ // table表头
        { prop: 'workTime', label: '班次', width: 120 },
        { prop: 'processName', label: '子过程' },
        { prop: 'cargoName', label: '货名' },
        { prop: 'packingName', label: '包装' },
        { prop: 'startRegionName', label: '起始区域', width: 90 },
        { prop: 'endRegionName', label: '终点区域', width: 90 },
        { prop: 'carNum', label: '车数' },
        { prop: 'quantity', label: '件数' },
        { prop: 'ton', label: '重量' },
        { prop: 'volume', label: '体积', width: 90 },
        { prop: 'cargoFormName', label: '货物形态' },
        { prop: 'changeFormName', label: '变化形态' },
        { prop: 'remark', label: '备注' }

      ],
      tableAllColumn: [ // table表头
        { prop: 'processName', label: '作业过程', width: 150 },
        { prop: 'cargoName', label: '货名', width: 100 },
        { prop: 'cargoOwnerName', label: '货主', isShort: true },
        { prop: 'cargoAgentName', label: '货代', isShort: true },
        { prop: 'packingName', label: '包装', width: 70 },
        { prop: 'carNum', label: '车数', fixed: 'right', width: 60 },
        { prop: 'quantity', label: '件数', fixed: 'right' },
        { prop: 'ton', label: '重量', fixed: 'right' },
        { prop: 'volume', label: '体积', fixed: 'right', width: 90 }
      ],
      selectRow: []
    }
  },
  computed: {
    tableHeight: function() {
      return this.$store.state.tableHeight - 240
    }
  },
  methods: {
    /**
	 * 判断是否可选
	 */
    checkSelect(row) {
      if (row.children) {
        return true;
      } else if (row.children === null || row.children.length === 0) {
        return false;
      }
    },
    /**
	 * 单选
	 */
    handleSelectionChange(val) {
      console.log(val, 'val');
      this.selectRow = val;
      this.formData.yardTicketListSum.forEach(item => {
        item.isWriteOff = null;
      })
      if (val.length === 0) return
      // 若存在一条数据 再次点击 该函数会执行三次 若没有数据选中，执行一次
      // 第一次 选中状态 val中有两条数据 => 走if
      // 第二次 清空数据 val为空  => 不走if
      // 第三次 将最后一条数据设置为选中状态 val有一条数据 =>不走if
      val.forEach(item => {
        item.isWriteOff = 'Y'
      })
    },
    changeSelect(item) {
      this.$refs.myTable.toggleRowSelection(item, true);
    }

  }
}
</script>

<style lang="less" scoped>
@import "../component/index.less";
[v-cloak] {
	display: none;
}
</style>
